<template>
  <div>
    <form @submit.prevent="fn">
      <label>姓名：</label>
      <input type="text" name="username" v-model.trim="form.username"><br><br>

      <label>年龄：</label>
      <input type="number" name=age  v-model.trim="form.age"><br><br>

      <label>身高：</label>
      <input type="number" name=header step=0.01 v-model.trim="form.header">(米)<br><br>

      <label>体重：</label>
      <input type="number" name=weight step=0.01 v-model.trim="form.weigth">(公斤)<br><br>

      <label>病史：</label>
      <input type="text" name="older" v-model.trim="form.older"><br><br>

      <button>诊断</button>
    </form>

    <p v-if="BMI>0&&BMI<18.5">患者 {{uname}} 的诊断结果：体重偏低</p>
    <p v-else-if="BMI>=18.5&&BMI<23">患者 {{uname}}  的诊断结果：体重正常</p>
     <p v-else-if="BMI>23">患者  {{uname}}  的诊断结果：体重偏高</p>
  </div>
</template>

<script>
export default {

  data() {
    return {
      uname:'',
      BMI:'',
      form:{
        username:'',
        age:'',
        header:'',
        weigth:'',
        older:'',
      }
    }
  },
  methods: {
    reset(){
      this.form.username=''
      this.form.age=''
      this.form.header=''
      this.form.weigth=''
      this.form.older=''
    },
    fn(){
    this.uname=this.form.username
    this.BMI=this.form.weigth/(this.form.header*this.form.header)
    this.BMI?this.reset():''
    }
  },

}
</script>

<style scoped lang="less"></style>
